<template>
<div class="mine-website-isapp-cp">
    <MyTabSlot 
        class="type-list"
        :activeIndex="currentIndex"
        gridStyle="auto"
        v-show="typeList">
        <div 
            :class="{
                'item':true,
                'active-item':index==currentIndex,
            }" 
            v-for="(item,index) in typeList" 
            :key="index"
            @click="setCurrentIndex(index)">
            {{item}}
        </div>
    </MyTabSlot>
    <div
        class="list-container"
        v-show="typeList && typeList.length >0">
        <div 
            class="item"
            v-for="item in userWebsitesObj[typeList[currentIndex]]"
            :key="item.id">
            <WebsiteItem
                :website="item.website"
                :searchData="searchInputData"
                :themeMode="themeMode">
            </WebsiteItem>
        </div>
    </div>
</div>
</template>

<script>
/*
 我的网址(app端)
 */
import MyTabSlot from "@/components/MyTabSlot";
import WebsiteItem from"./WebsiteItem";
import {getUserWebsitesObj,getUserWebsiteTypes} from "@/common/Tools";
import {isPc} from "@/common/OtherTools";
export default {
    name: 'MineWebsiteCp',
    components: {
        WebsiteItem,MyTabSlot,
    },
    props:{
        userWebsiteList:{  //当前显示的网站数据，可以是当前用户，也可以是推荐网站列表
            type:Array,
            default:()=>{
                return [];
            },
        },
        themeMode:{
            type:String,
            default:'black',
        },
    },
    data(){
        return {
            currentIndex:0, //当前选中的索引
            shiftDown:false,  //shift键是否按下
        };
    },
    computed:{  
        userWebsitesObj(){  //全局的网站对象化的数据 类型为键
            return getUserWebsitesObj(this.userWebsiteList);
        },
        typeList(){ //全局用户网站的类型列表
            return getUserWebsiteTypes(this.userWebsiteList);
        },
        swiper() { //swiper实例
            return this.$refs.mySwiper.swiper;
        },
        searchInputData(){ //全局输入框里的值
            return this.$store.state.index.searchInputData;
        },
        userData(){
            return this.$store.state.user.user;
        },
        letterList(){  //26个字母数组
            const s = [];
            for (var i = 0; i < 26; i++) {
                s.push(String.fromCharCode((65 + i)));
            }
            return s;
        },
        keyList(){  //键盘字符与当前显示的网站对象
            const webList = this.userWebsitesObj[this.typeList[this.currentIndex]];
            const keyList = {};
            this.letterList.forEach((item,index) => {
                if(!webList[index]) return;
                keyList[item] = webList[index].website;
            });
            return keyList;
        },
        space(){
            return this.$store.state.config.space;;
        },
        typeShow(){
            return this.$store.state.config.typeShow;;
        },
        websiteTopSpace(){
            return this.$store.state.config.websiteTopSpace;;
        },
        searchRadius(){
            return this.$store.state.config.searchRadius;;
        },
    },
    watch:{
        typeList:{ //监听获取网站类型数组，初始化选择第一个
            handler(newValue){
                if(this.currentIndex>this.typeList.length-1){
                    this.$nextTick(()=>{
                        this.setCurrentIndex(0);
                    });
                }
            },
            immediate:true,
        },
    },
    mounted(){
        if(!isPc()) return;  //移动端不初始化事件
        document.addEventListener('keydown',this.onKeyDown);
        document.addEventListener('keyup',this.onKeyup);
        document.addEventListener('click', () => {  //如果元素不是在组件上点击的则隐藏该组件
            this.shiftDown = false;  //但凡页面上点击后都取消shiftDown按下
        });
    },
    methods:{
        setCurrentIndex(index){ //设置当前选中的索引
            this.currentIndex = index;
            this.$refs.TouchTab.setActiveEl(index); //跳转
            setTimeout(()=>{
                this.$refs.TouchTab.computeHeight(); //重新计算高度
            },0);
        },
        onSlideChange(index){ //swiper从一个slide过渡到另一个slide结束时执行
            this.currentIndex = index;
            setTimeout(()=>{
                this.$refs.TouchTab.computeHeight(); //重新计算高度
            },0);
        },
        onAddIsDefined(){
            this.$refs.EditWebsite.initData({
                show:true,
                websiteType:this.typeList[this.currentIndex],
            });
        },
        onKeyDown(event){  //键盘按下事件
            event = event || window.event || arguments.callee.caller.arguments[0];
            const keyCode = event.keyCode;   //取得键盘码
            if(event.keyCode == 16 || event.shiftKey){this.shiftDown = true;}
            if(!event.shiftKey || event.ctrlKey || event.altKey) return;  //必须只是shift键
            if(keyCode<65 || keyCode >90) return;  //必须只能是字母
            const web = this.keyList[this.letterList[keyCode-65]];
            if(!web) return;
            this.shiftDown = false;
            window.open(web.link);
        },
        onKeyup(event){
            event = event || window.event || arguments.callee.caller.arguments[0];
            if(event.keyCode == 16){this.shiftDown = false;}
        },
    },
}
</script>
<style lang="scss" scoped>
.mine-website-isapp-cp{
    width: 100%;
    border: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: -1;
    user-select: none;
    >.type-list{
        display: flex;
        align-items: center;
        background-color: hsla(0, 0%, 0%, 0.129);
        box-sizing: border-box;
        color: #f7f7f7;
        width: max-content;
        z-index: 1;
        border-radius: var(--searchRadius);
        &:hover{
            opacity: 1 !important;
        }
        >.item{
            cursor: pointer;
            line-height: 1.5;
            width: max-content;
            border-radius: var(--searchRadius);
        }
        >.active-item{
            background-color: rgba(0, 132, 255, 0.2);
            color: #0084ff;
            font-weight: bold;
            border-radius: var(--searchRadius);
        }
    }
    .list-container{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1fr,4);
        .web{
            width: fit-content;
            height: fit-content;
        }
    }
}
</style>

